js构建离线应用

内容主要引用自吴浩麟著《webpack深入浅出》

离线应用

离线应用的优点：
在没有网络的情况下能打开网页。
由于部分缓存的资源直接从本地加载，所以对用户来说可以加快网页的加载速度，减少服务器压力。

技术实现：

离线应用的核心是离线缓存技术，历史上曾先后出现两种离线缓存技术。

• AppCache：又叫做Application Cache，目录已经从web标准中删除，尽量不要使用。
• Service Workers：目前最新的离线缓存技术，是Web Worker的一部分，它通过拦截网络请求实现离线缓存，比 AppCache更灵活。因为它可以通过js代码去控制缓存的逻辑。

Service Workers

Service Workers是一个在浏览器后台运行的脚本，它的生命周期完全独立于网页，它无法直接访问DOM。它可以通过postMessage接口发送消息来和UI进程通信。

拦截网络功能是Service Workers的重要功能。通过Service Workers能完成离线缓存，编辑响应，过滤响应等功能。

目前Chrome,Firefox,Opera都已经全面支持Service Workers。但只有高版本的Android支持移动端的浏览器。，由于Service Workers无法通过注入Polyfill实现兼容，所以在打算使用它前，请先确认自己的网页的运行场景。

注：Polyfill：
垫片，就是帮你加一层东西来解决问题，不光是兼容性问题，pollyfill是个概念举个例子，有些旧浏览器不支持Number.isNaN方法，Polyfill就可以是这样的：

·if(!Number.isNaN) {
    Number.isNaN = function(num) {
        return(num !== num);
    }
}·

啥意思呢，就是假如浏览器没有Number.isNaN方法，那咱们就给它添加上去，所谓Polyfill就是这样解决API的兼容问题的。
判断浏览器是否支持Service Workers的最简单方法是通过以下代码：
if(navigator.serviceWorker){alert(true)}

注册Service Workers

要为网页接入Service Workers，需要在网页加载后注册一个描述Service Workers逻辑的脚本，代码如下：

`if(navigator.serviceWorker)
{
    window.addEventListener('DOMContentLoaded',function(){
        navigator.serviceWorker.register('./sw.js')
    })
}`

一旦这个脚本文件被加载，Service Workers的安装就开始了，在这个脚本被安装到浏览器中后，
就算是用户关闭了当前网页，它仍会存在，也就是第一次打开该网页时，Service Workers的逻辑不会生效。
因为脚本还没有被加载和注册，但是以后再次打开该网页时脚本里的逻辑将会生效。

在Chrome中可以通过打开网址chrome://inspect/#service-workers来查看当前浏览器中所有已注册的Service Workers。

更新缓存

浏览器针对Service Workers有如下机制：

• 每次打开接入了Service Workers的网页时，浏览器都会重新下载Service Workers脚本文件，所以要注意该脚本文件不要太大，如果发现和当前已经注册过的文件存在字节差异，就将其视为“新服务工作线程”。
• 新的Service Workers线程将会启动，且将会触发其install事件。
• 当网站上当前打开的页面关闭时，旧的Service Workers线程将会被终止，新的Service Workers线程将会取得控制权。
• 新的Service Workers线程取得控制权后，将会触发其activate事件。

• 新的Service Workers线程中的activate事件就是清理旧缓存的最佳时间点

  Service Workers在注册成功后会在其生命周期中派发一些事件，通过监听对应的事件，在特定的时间上做一些事情。

  在Service Workers脚本中引入了新的关键字self，代表当前的Service Workers实例。

  在Service Workers安装成功后会派发出install事件，需要在这个事件中执行缓存资源的逻辑。

接入webpack

用webpack构建接入Service Workers的离线应用时，要解决的问题在于如何生成之前提到的sw.js文件。
并且sw.js文件中的cacheFileList变量，代表需要被缓存文件的URL列表，需要根据输出文件列表所对应的URL来决定。而不是写成静态值。

webpack没有原生功能可以完成以上需求，可以使用插件serviceworker-webpack-plugin
·

const ServiceWorkerWebpackPlugin=require('serviceworker-webpack-plugin')
    new ServiceWorkerWebpackPlugin({
            // 自定义的 sw.js 文件所在路径
            // ServiceWorkerWebpackPlugin 会把文件列表注入到生成的 sw.js 中
            entry: path.join(__dirname, 'sw.js'),
        })
    devServer: {
        //Service Workers依赖HTTPS，使用DevServer提供的HTTPS功能。
        https:true
    }

·
在目录下新建sw.js文件，手动写手更新缓存里的代码，。

serviceworker-webpack-plugin为了保证灵活性，允许使用都自定义sw.js，构建输出的sw.js文件中会在头部注入一个变量serviceWorkerOption.assets到全局，里面存放着所有需要被缓存的文件的URL列表。

需要将sw.js里的文件列表变量写成动态的
·

var cacheFileList=global.serviceWorkerOption.assets

在main.js代码中注册:
if (navigator.serviceWorker) {
    window.addEventListener('DOMContentLoaded',function() {
        // 调用 serviceWorker.register 注册，参数 /sw.js 为脚本文件所在的 URL 路径
        navigator.serviceWorker.register('sw.js');
    });
}

·

**
注：使用Service Workers技术需要依赖HTTPS，可以使用DevServer提供的HTTPS功能。DevServer会自动生成一份HTTPS证书。
**